<!--
 * @Descripttion: 
 * @version: 实现弹窗的拖拽功能
 * @Author: 尹伊
 * @Date: 2020-06-19 17:37:05
 * @LastEditors: 尹伊
 * @LastEditTime: 2020-11-09 16:37:23
-->
<template>
  <div>
    <!-- <el-button @click='handleDialog'>按钮</el-button>
    <el-button @click='handleTest'>测试</el-button>
    <el-dialog v-dialogDrag title="提示" :modal='false' :close-on-click-modal='false' :append-to-body="true"
      :visible.sync="centerDialogVisible" width="30%" center>
      <span>需要注意的是内容是默认不居中的</span>
    </el-dialog> -->


    <!-- <Auto1></Auto1> -->

    <autoDialog>
      neirongksdhf
    </autoDialog>

  </div>
</template>
<script>
  import '@/factory/dialog.js'
  import autoDialog from '@/components/auto-dialog'
  import Auto1 from '@/components/test'
  export default {
    name: 'dialogPage',
    head() {
      return {
        title: '弹窗拖拽',
      }
    },
    components: {
      autoDialog,
      Auto1
    },
    data() {
      return {
        centerDialogVisible: false,
        show: false
      }
    },
    methods: {
      handleDialog() {
        this.centerDialogVisible = true
      },
      handleTest() {
        console.log('弹窗')
        this.show = true
      },
      // 拖动整个div
      handleBox(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        box.style.cursor = 'move'
        const disX = e.clientX - box.offsetLeft
        const disY = e.clientY - box.offsetTop
        let boxWidth = box.offsetWidth
        let boxHeight = box.offsetHeight
        let bodyHeight = document.body.clientHeight
        let bodyWidth = document.body.clientWidth
        const sty = box.currentStyle || window.getComputedStyle(box, null)
        let styL, styT
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/\px/g, '')
          styT = +sty.top.replace(/\px/g, '')
        }
        document.onmousemove = function (e) {
          // 通过事件委托，计算移动的距离
          let l = e.clientX - disX
          let t = e.clientY - disY

          console.log(l, '左边距离')

          if ((l + boxWidth) > bodyWidth) {
            l = bodyWidth - boxWidth
          } else if (l < 0) {
            l = 0
          }

          if ((t + boxHeight) > bodyHeight) {
            t = bodyHeight - boxHeight
          } else if (t < 0) {
            t = 0
          }

          // 移动当前元素
          // box.style.left = `${l + styL}px`
          // box.style.top = `${t + styT}px`
          box.style.left = l + 'px'
          box.style.top = t + 'px'
        }
        this.clearMouse(e)
      },
      // 右边
      handleDownR(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        // 鼠标开始的位置
        var startX = e.clientX
        let boxWidth = box.offsetWidth
        let bodyWidth = document.body.offsetWidth
        document.onmousemove = function (e) {
          var endX = e.clientX
          var moveLen = endX - startX
          var finnalWidth = boxWidth + moveLen
          if (finnalWidth > bodyWidth) {
            finnalWidth = bodyWidth - 20
          }
          box.style.width = finnalWidth + 'px'
        }
        this.clearMouse(e)
      },
      // 左边
      handleDownL(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        // 鼠标开始的位置
        var startX = e.clientX
        let boxWidth = box.offsetWidth
        let bodyWidth = document.body.offsetWidth
        let left = box.offsetLeft
        document.onmousemove = function (e) {
          var endX = e.clientX
          var moveLen = endX - startX
          var finnalWidth = boxWidth - moveLen
          if (finnalWidth > bodyWidth) {
            finnalWidth = bodyWidth - 20
          }
          box.style.left = left + moveLen + 'px'
          box.style.width = finnalWidth + 'px'
        }
        this.clearMouse(e)
      },
      // 上
      handleDownT(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        // 鼠标开始的位置
        var startY = e.clientY
        let boxHeight = box.offsetHeight
        let top = box.offsetTop
        let bodyHeight = document.body.offsetHeight
        document.onmousemove = function (e) {
          var endY = e.clientY
          console.log(endY, '结束高度')
          var moveLen = endY - startY
          console.log(moveLen, '移动距离')
          var finnalHeight = boxHeight - moveLen
          if (finnalHeight > bodyHeight) {
            finnalHeight = bodyHeight - 20
          }
          box.style.top = top + moveLen + 'px'
          box.style.height = finnalHeight + 'px'
        }
        this.clearMouse(e)
      },
      // 底
      handleDownB(e) {
        var box = document.getElementsByClassName('hanManual')[0]
        // 鼠标开始的位置
        var startY = e.clientY
        console.log(startY, '开始高度')
        let boxHeight = box.offsetHeight
        let bodyHeight = document.body.offsetHeight
        document.onmousemove = function (e) {
          var endY = e.clientY
          console.log(endY, '结束高度')
          var moveLen = endY - startY
          console.log(moveLen, '移动距离')
          var finnalHeight = boxHeight + moveLen
          if (finnalHeight > bodyHeight) {
            finnalHeight = bodyHeight - 20
          }
          box.style.height = finnalHeight + 'px'
        }
        this.clearMouse(e)
      },
      clearMouse(e) {
        document.onmouseup = function (e) {
          document.onmousemove = null;
          document.onmouseup = null;
          box.releaseCapture && box.releaseCapture()
        }
      }
    },
  }
</script>
<style scoped lang="scss">
  .hanManual {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 50%;

    .border-l {
      position: absolute;
      left: 0;
      width: 1px;
      height: 100%;
      background-color: black;
      cursor: w-resize;
    }

    .border-r {
      position: absolute;
      right: 0;
      width: 1px;
      height: 100%;
      background-color: black;
      cursor: e-resize;
    }

    .border-t {
      position: absolute;
      top: 0;
      width: calc(100% - 1px);
      height: 1px;
      background-color: black;
      cursor: n-resize;
    }

    .border-b {
      position: absolute;
      bottom: 0;
      width: calc(100% - 1px);
      height: 1px;
      background-color: black;
      cursor: s-resize;
    }

    .content {
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: red;
    }
  }
</style>